<template>
  <a-drawer
    title="绑定检查单元"
    :maskClosable="false"
    width=650
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="companyUnitVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">
      <a-form-item label='关联检查单元' v-bind="formItemLayout">
        <a-select
          mode="multiple"
          placeholder="请选择检查单元"
          style="width: 100%"
          @change="handleSelectChange"
          v-decorator="['unitId']">
          <a-select-option v-for="u in unitData" :key="u.unitId.toString()">
            {{u.unitName}}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <a-table :columns="columns" :dataSource="chooseUnit" bordered>
      <template slot="footer">
        总分：&nbsp;<a-input  :value="score" deisabled style="width: 200px;"/>
      </template>
    </a-table>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-drawer>
</template>
<script>
const columns = [
    {
      title: '单元名称',
      dataIndex: 'unitName',
      width: '25%',
      scopedSlots: { customRender: 'unitName' },
    },
    {
      title: '分数',
      dataIndex: 'unitScore',
      width: '20%',
      scopedSlots: { customRender: 'unitScore' },
    },
    {
      title: '权重',
      dataIndex: 'unitWeight',
      width: '20%',
      scopedSlots: { customRender: 'unitWeight' },
    },
  ];
const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 18 }
}
export default {
  name: 'CompanyUnit',
  props: {
    companyUnitVisiable: {
      default: false
    }
  },
  data () {
    return {
      columns,
      formItemLayout,
      form: this.$form.createForm(this),
      company: {},
      companyId: '',
      loading: false,
      unitData: [],
      initUnit: [],
      chooseUnit: [],
      score: 0.0
    }
  },
  computed: {
  },
  methods: {
    onClose () {
      this.loading = false
      this.form.resetFields()
      this.chooseUnit = []
      this.initUnit = []
      this.$emit('close')
    },
    setFormValues ({...company}) {
      this.companyId = company.companyId
      let fields = []
      Object.keys(company).forEach((key) => {
        if (fields.indexOf(key) !== -1) {
          this.form.getFieldDecorator(key)
          let obj = {}
          obj[key] = company[key]
          this.form.setFieldsValue(obj)
        }
      })
      if (company.unitId) {
        this.form.getFieldDecorator('unitId')
        let unitArr = company.unitId.split(',')
        this.form.setFieldsValue({'unitId': unitArr})
        this.initUnit = unitArr;
      }
    },
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true
          let company = this.form.getFieldsValue()
          company.companyId = this.companyId
          company.unitId = company.unitId.join(',')
          this.$post('company/addUnit', {
            ...company
          }).then((r) => {
            this.loading = false
            this.$emit('success')
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    handleSelectChange(value){
      this.chooseUnit = [];
      let score = 0.0
      for (let index = 0; index < value.length; index++) {
        for (let j = 0; j < this.unitData.length; j++) {
          if (this.unitData[j].unitId == value[index]){
            this.chooseUnit.push({
              key: this.unitData[j].unitId,
              unitName: this.unitData[j].unitName,
              unitScore: this.unitData[j].unitScore,
              unitWeight: this.unitData[j].unitWeight
            });
            score += this.unitData[j].unitScore * this.unitData[j].unitWeight
            break;
          }
        }
      }
      this.score = score
    }
  },
  watch: {
    companyUnitVisiable () {
      if (this.companyUnitVisiable) {
        this.$get('unit').then((r) => {
          this.unitData = r.data.rows
          let unitArr = this.initUnit
          this.chooseUnit = []
          this.score = 0.0
          for (let index = 0; index < unitArr.length; index++) {
            for (let j = 0; j < this.unitData.length; j++) {
              if (this.unitData[j].unitId == unitArr[index]){
                this.chooseUnit.push({
                  key: this.unitData[j].unitId,
                  unitName: this.unitData[j].unitName,
                  unitScore: this.unitData[j].unitScore,
                  unitWeight: this.unitData[j].unitWeight
                });
                this.score += this.unitData[j].unitScore * this.unitData[j].unitWeight
                break;
              }
            }
          }
        })
      }
    }
  }
}
</script>
<style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }
  .ant-input {
    width: 200px;
    margin: 0 8px 8px 0;
  }
</style>
